<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 移动端基础知识 -->
    <!-- 必要性：移动端的流量占比高达约63%
    常见的移动端：原生APP和小程序及H5（web端）
    移动端的页面宽度根据设备宽度来定,不需要设置版心 -->

    <!-- 视口标签：
    有了这句话就能自动适配
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        width是设置视口宽度，取值是：device-width或者具体值(称为理想视口)，默认为980px(也叫布局视口)
        inital-scale是页面缩放比例，默认为1.0，与width和device配合使用，避免缩放混乱
        minimum-scale是允许用户缩放的最小比例，若设为1.0，则为禁用
        maximum-scale是允许用户缩放的额最大比例，注意：限制缩放范围，但可能影响无障碍访问
        user-scalable是允许用户手动缩放，yes(1)或者no(0)，禁用可提升用户体验，谨慎使用 -->

    <!-- 物理像素&css像素
    物理像素(设备像素):是由屏幕的硬件决定的,是设备的实际像素数量
    css像素(设备独立像素或者逻辑像素):是css中的一个虚拟像素,用于布局和样式计算,是一个抽象的概念,不直接对应物理像素,而是通过像素比(DPR)与物理像素关联
    注意:设计稿是基于物理像素设计,css开发基于css像素,先转换之后在进行开发 -->

    <!-- 实现移动端的适配方案
    1.响应式:一套代码通过响应式方案完成适配
    2.单位适配,设备通过响应式完成适配(单独制作手机端页面,通过rem和vw等单位完成页面的适配) -->

    <!-- vw: 1vw = 视口宽度的1%,注意,一定是视口,区分%,%相对于父元素
    计算稿转换公式:
    vw值 = (元素在设计稿中的px值/设计稿宽度) x 100vw
    高宽一般都使用vw即可,vh适用少
    vw适配方案:
        1.使用calc()函数 ==>书写繁琐
        2.使用css预处理器(推荐),less或者sass实现,后续工程化讲
        3.结合PostCSS插件(最佳实践) ==>使用less/sass代码直接写px==>使用postcss-px-to-viewport插件,打包发布的时候会同意自动转化为vw,但是需要脚手架知识,后续的vue会讲 -->

    <!-- 使用postcss-px-to-viewport插件：ait + v&w -->
    <style>
        .textBox {
            width: 28.2667vw;
            height: 28.2667vw;
        }
    </style>

</head>
<body>
    <div class="textBox"></div>
</body>
</html>